Range

A jQuery plugin for cross browser range inputs.

Demo

Basic

Custom Labels

No Labels

Custom Range

Vertical

Use

Main

range.js
range.css

Dependencies

core.js
touch.js

Basic

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-range-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
customClass string '' Class applied to instance
formatter function false Value format function
labels boolean true Draw labels
labels.max string   Max value label; defaults to max value
labels.min string   Min value label; defaults to min value
vertical boolean false  

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.range("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").range("destroy");

disable

Disables target instance

$(".target").range("disable");

enable

Enables target instance

$(".target").range("enable");

resize

Resizes instance

$(".target").range("resize");